<template>
	<div ref="spindleBreakageChart" style="height: 500px;"></div>
</template>
<script>
    import { borderColor, color, legendTextStyle } from '../../../../productionMonitor/kanBan/componenst/charts/chart-conf';
    import * as echarts from 'echarts';

    export default {
        props: {
            chartData: {
                type: Array,
                default() {
                    return [];
                }
            }
        },
        data() {
            return {
                example: null,
                borderColor: '#c5c8ce',
                option: {
                    title: {
                        text: '',
                        textStyle: {
                            fontWeight: 'none'
                        }
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        top: '30px',
                        right: '10px',
                        bottom: '10px',
                        left: '20px',
                        containLabel: true
                    },
                    legend: {
                        data: ['趋势图'],
                        textStyle: {
                            color: legendTextStyle
                        }
                    },
                    xAxis: {
                        type: 'category',
                        data: [323, 242, 355, 276, 118, 434, 251],
                        axisLabel: {
                            show: true,
                            color: color

                        },
                        nameTextStyle: {
                            color: 'red'
                        },
                        boundaryGap: true,
                        axisLine: {
                            lineStyle: {
                                color: borderColor
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            name: '千锭时(根)',
                            nameLocation: 'end',
                            nameTextStyle: {
                                align: 'left'
                            },
                            splitLine: {
                                lineStyle: {
                                    color: 'none'
                                }
                            },
                            axisLabel: {
                                show: true,
                                color: color
                            },
                            axisLine: {
                                lineStyle: {
                                    color: borderColor
                                }
                            }
                        }
                    ],
                    dataZoom: [
                        {
                            type: 'inside',
                            start: 0,
                            end: 100
                        },
                        {
                            start: 0,
                            end: 100
                        }
                    ],
                    series: [
                        {
                            name: '趋势图',
                            type: 'line',
                            data: [],
                            yAxisIndex: 0,
                            smooth: true,
                            // symbol: 'none',
                            barGap: '-100%',
                            itemStyle: {
                                color: 'rgb(255, 70, 131)'
                            },
                            areaStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: 'rgb(255, 158, 68)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgb(255, 70, 131)'
                                    }
                                ])
                            }
                        }
                    ]
                }
            };
        },
        methods: {
            initChart() {
                this.$nextTick(() => {
                    this.example = echarts.init(this.$refs.spindleBreakageChart);
                    this.example.setOption(this.option);
                });
            },
            updateChart() {
                if (this.example) {
                    this.$nextTick(() => {
                        this.example.setOption(this.option);
                    });
                } else {
                    this.initChart();
                }
            },
            getDHMS(e) {
                const d = new Date(e);
                const hour = d.getHours();
                const minute = d.getMinutes();
                return `${hour}:${minute}`;
            }
        },
        watch: {
            chartData: {
                handler(newVal) {
                    if (!newVal) return;
                    this.option.xAxis.data = this.chartData.map(x => this.getDHMS(x.time));
                    this.option.series[0].data = this.chartData.map(x => Number(x.data));
                    this.updateChart();
                },
                deep: true,
                immediate: true
            }
        }
    };
</script>
